import React from 'react';
import ProTable from '/@/components/proTable';
import type { ProColumnsType, ProTableRequest } from '/@/components/proTable/type';
import Icon from '/@/components/icon';
import { Button, DatePicker } from 'antd';
import axios from 'axios';
import moment from 'moment';
const { RangePicker } = DatePicker;
interface DataType {
  name: string;
  number: number;
  title: string;
  created_at: number;
  key: React.Key;
}

export default function index() {
  const columns: ProColumnsType<DataType> = [
    {
      title: 'id',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: 'number',
      dataIndex: 'number',
      hideInSearch: true,
    },
    {
      title: '标题',
      dataIndex: 'title',
      initialValue: '此项必填',
      copyable: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
        tooltip: '此项必填',
      },
      ellipsis: {
        showTitle: true,
      },
    },
    {
      title: '时间筛选',
      dataIndex: 'time',
      renderFormItem() {
        return <RangePicker></RangePicker>;
      },
      search: {
        //时间转换
        transform: (value) => {
          return {
            starTime: value[0],
            endTime: value[1],
          };
        },
      },
      hideInTable: true,
    },
    {
      title: '开始时间',
      dataIndex: 'created_at',
      search: false,
      hideInSearch: true,
      sorter: (a, b) => a.created_at - b.created_at,
      render: (text) => moment(text).local().format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '结束时间',
      dataIndex: 'updated_at',
      hideInSearch: true,
      sorter: (a, b) => a.created_at - b.created_at,
      render: (text) => moment(text).local().format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: () => {
        return (
          <>
            <span>操作</span>
            <span style={{ float: 'right' }}>
              <Icon icon='SettingOutlined'></Icon>
            </span>
          </>
        );
      },
      valueType: 'option',
      // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
      render: (text, record, index) => {
        return [
          <Button key='1' type='primary' size='small' style={{ marginRight: '10px' }}>
            编辑
          </Button>,
          <Button key='2' type='primary' danger size='small'>
            删除
          </Button>,
        ];
      },
      fixed: 'right',
      width: 150,
    },
  ];

  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const httpRequest: ProTableRequest<DataType> = async (params, filters, sorter) => {
    const res = await axios.get('https://proapi.azurewebsites.net/github/issues', {
      params,
    });
    return res.data;
  };
  return (
    <ProTable
      columns={columns}
      request={httpRequest}
      pagination={{
        pageSize: 10,
        current: 1,
        position: ['bottomRight'],
      }}
      rowKey='id'
      headerTitle='高级表格'
      scroll={{
        x: 1600,
      }}
      toolBarRender={() => {
        return [
          <Button type='primary' key='new'>
            新建
          </Button>,
        ];
      }}
    ></ProTable>
  );
}
